<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园 - 个人设置</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a90e2;
            --success-color: #2ecc71;
            --danger-color: #e74c3c;
            --text-color: #2c3e50;
            --border-color: #dcdde1;
            --background-color: #f5f6fa;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--background-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
        }

        .dashboard {
            max-width: 1000px;
            margin: 0 auto;
        }

        /* 个人信息卡片样式 */
        .profile-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
            margin-bottom: 30px;
        }

        .profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }

        .profile-avatar {
            width: 80px;
            height: 80px;
            background: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
        }

        .profile-avatar i {
            font-size: 2.5em;
            color: white;
        }

        .profile-title h2 {
            margin: 0;
            color: var(--text-color);
            font-size: 1.5em;
        }

        .profile-title p {
            margin: 5px 0 0;
            color: #666;
            font-size: 0.9em;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-color);
            font-weight: 500;
        }

        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            transition: all 0.3s ease;
            font-size: 0.95em;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
        }

        /* 按钮样式 */
        .btn-container {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 30px;
        }

        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn-secondary {
            background: #95a5a6;
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        /* 加载动画 */
        .loading-spinner {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.8);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .profile-header {
                flex-direction: column;
                text-align: center;
            }

            .profile-avatar {
                margin: 0 auto 20px;
            }

            .btn-container {
                flex-direction: column;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
<div class="dashboard">
    <div class="profile-card">
        <div class="profile-header">
            <div class="profile-avatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="profile-title">
                <h2>个人设置</h2>
                <p>管理您的个人信息和账户设置</p>
            </div>
        </div>

        <form action="admin/settings" method="post" id="settingsForm">
            <div class="form-group">
                <label for="fullname">
                    <i class="fas fa-user"></i> 姓名
                </label>
                <input type="text" id="fullname" name="fullname" class="form-control" required>
            </div>

            <div class="form-group">
                <label for="password">
                    <i class="fas fa-lock"></i> 密码
                </label>
                <input type="password" id="password" name="password" class="form-control" required>
            </div>

            <div class="form-group">
                <label for="telephone">
                    <i class="fas fa-phone"></i> 手机号
                </label>
                <input type="text" id="telephone" name="telephone" class="form-control" required>
            </div>

            <div class="btn-container">
                <button type="button" class="btn btn-secondary" id="resetBtn">
                    <i class="fas fa-undo"></i> 重置
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> 保存更改
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 加载动画 -->
<div id="loadingSpinner" class="loading-spinner">
    <div class="spinner"></div>
</div>

<script>
    $(document).ready(function() {

        // 获取管理员信息
        function loadAdminInfo() {
            $.ajax({
                url: "admin/settings",
                method: "GET",
                dataType: "json",
                success: function(data) {
                    if (data) {
                        $("#fullname").val(data.fullname);
                        $("#password").val(data.password);
                        $("#telephone").val(data.telephone);
                    }
                },
                error: function(xhr, status, error) {
                    alert("获取管理员信息失败");

                }
            });
        }

        // 表单提交事件
        $("#settingsForm").submit(function(e) {
            e.preventDefault();

            const formData = {
                fullname: $("#fullname").val(),
                password: $("#password").val(),
                telephone: $("#telephone").val()
            };
console.log(formData)
            $.ajax({
                url: "admin/settings",
                method: "POST",
                contentType: "application/json",
                data: JSON.stringify(formData),
                success: function(response) {
                    alert("保存成功")
                    // 保存成功后，执行前端重定向
                    window.location.href = "http://localhost:8080/attend_war/login.jsp";
                },
                error: function(xhr, status, error) {
                    alert("保存失败");
                }
            });
        });

        // 重置按钮事件
        $("#resetBtn").click(function() {
            loadAdminInfo(); // 重新加载原始数据
        });

        // 首次加载数据
        loadAdminInfo();
    });
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>